<template>
  <div>
    <personTop headline="栏目管理"></personTop>
    <div class="management_main">
      <h2>点击删除以下频道</h2>
      <ul class="active_list">
        <li
          @click="active_click(index)"
          v-for="(item,index) of active_list"
          :key="index"
        >{{item.name}}</li>
      </ul>

      <h2>点击添加以下频道</h2>
      <ul class="delete_list">
        <li
          @click="delete_click(index)"
          v-for="(item,index) of delete_list"
          :key="index"
        >{{item.name}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import personTop from "../components/personTop";
export default {
  data() {
    return {
      active_list: [],
      delete_list: []
    };
  },
  methods: {
    // 已拥有的栏
    active_click(index) {
      const item = this.active_list.splice(index, 1);
      this.delete_list.push(item[0]);
    },
    //  删除的栏
    delete_click(index) {
      const item = this.delete_list.splice(index, 1);
      this.active_list.push(item[0]);
    }
  },
  mounted() {
    this.$axios({
      method: "get",
      url: "/category"
    }).then(res => {
      const { data } = res.data;
      this.active_list = data;
    });
  },
  components: {
    personTop
  }
};
</script>

<style lang="less" scoped>
.management_main {
  padding: 5.556vw;
}
h2 {
  font-size: 7.222vw;
  font-weight: 400;
  padding: 20px 0;
}
.active_list,
.delete_list {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  li {
    margin: 2.778vw 2.778vw;
    border: 1px solid rgb(206, 176, 176);
    border-radius: 8.333vw;
    width: 22.222vw;
  }
}
</style>